<template>
  <div class="wechat-login">
    <div class="login-container" v-if="!loginSuccess">
      <h2>微信扫码登录</h2>
      <div class="qrcode-container" v-if="qrCodeUrl">
        <img :src="qrCodeUrl" alt="微信扫码登录" class="qrcode-image" />
        <p>请使用微信扫描二维码登录</p>
      </div>
      <div class="loading" v-else>
        <p>正在生成二维码...</p>
      </div>
      <div class="status-message">
        <p v-if="status === 'pending'">等待扫码...</p>
        <p v-else-if="status === 'scanned'">已扫码，请在微信中确认登录...</p>
        <p v-else-if="status === 'confirmed'">登录成功，正在跳转...</p>
        <p v-else-if="status === 'expired'">二维码已过期，请刷新页面重新获取</p>
        <p v-else-if="status === 'failed'">登录失败，请刷新页面重试</p>
      </div>
    </div>
    <div class="success-container" v-else>
      <h2>登录成功</h2>
      <p>欢迎您，{{ userInfo.nickname }}</p>
      <img :src="userInfo.headimgurl" :alt="userInfo.nickname" class="user-avatar" />
    </div>
  </div>
</template>

<script>
import { getWechatQrCode, checkWechatLogin } from '@/api/system/login';

export default {
  name: 'WechatLogin',
  data() {
    return {
      qrCodeUrl: '',
      state: '',
      status: 'pending', // pending, scanned, confirmed, expired, failed
      userInfo: null,
      loginSuccess: false,
      timer: null
    };
  },
  mounted() {
    this.generateQRCode();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 生成二维码
    async generateQRCode() {
      try {
        debugger
        const response = await getWechatQrCode();
        const { qrCodeUrl, state } = response.data;
        this.qrCodeUrl = qrCodeUrl;
        this.state = state;

        // 开始轮询检查登录状态
        this.startPolling();
      } catch (error) {
        console.error('生成二维码失败:', error);
      }
    },

    // 开始轮询检查登录状态
    startPolling() {
      this.timer = setInterval(async () => {
        try {
          const response = await checkWechatLogin(this.state);
          const { status, userInfo } = response.data;
          this.status = status;

          if (status === 'confirmed') {
            this.userInfo = userInfo;
            this.loginSuccess = true;
            clearInterval(this.timer);

            // 在实际应用中，这里应该设置用户登录状态并跳转到主页
            // this.$store.dispatch('user/login', userInfo);
            // this.$router.push('/');
          } else if (status === 'expired' || status === 'failed') {
            clearInterval(this.timer);
          }
        } catch (error) {
          console.error('检查登录状态失败:', error);
        }
      }, 2000); // 每2秒检查一次
    }
  }
};
</script>

<style scoped>
.wechat-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-container {
  text-align: center;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.qrcode-container {
  margin: 20px 0;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0 auto;
}

.loading {
  font-size: 16px;
  color: #666;
}

.status-message {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.success-container {
  text-align: center;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 20px;
}
</style>
